// 定义一个渐变背景色的变量
// @gradient-background: linear-gradient(to bottom right, #66b3f9, #2e61d7);
@gradient-background: linear-gradient(to top right, #193d5c, #2e61d7, #66b3f9, #2e61d7, #193d5c);

.headerbase {
    background: @gradient-background;
    height: 60px;
    width: 100%;
    border-bottom: solid 1px #265983;
}

.logo {
    text-align: left;
    padding: 5px 10px 10px 20px;
    /*上  右  下  左*/

    .flag {
        width: auto;
        /* 宽度根据高度自动调整 */
        height: 34px;
        /* 设置固定的高度 */
        background-image: url("../images/flag.png");
        background-size: contain;
        /* 保持图像比例，同时适应容器 */
        background-repeat: no-repeat;
        /* 防止背景图像重复 */
        background-position:left;
        margin-top: 10px;
        margin-left: 10px;
    }
}

.currentusername {
    text-align: right;
    padding: 18px 20px 10px 10px;
    /*上  右  下  左*/
    color: white;

}

.currentuser {
    text-align: left;
    padding: 10px 20px 10px 10px;
    /*上  右  下  左*/
}

.currentuser .el-avatar {
    cursor: pointer;
    size: 20;
}

.currentuser .exit {
    cursor: pointer;
    margin-left: 10px;
    height: 40px;
}

.logo .responsive-image {
    //width: 100%; /* 图像的最大宽度为其父元素的100% */
    //height: auto; /* 高度将自动调整以保持宽高比 */
    height: 40px;
    //width: 50px;
    margin-top: 5px;
}

.el-icon-password::before,
.el-icon-setting::before,
.el-icon-exit::before {
    content: '';
    display: inline-block;
    width: 20px;
    /* 图标宽度 */
    height: 20px;
    /* 图标高度 */
    margin-right: 10px;
    /* 图标与文本之间的间距 */
    vertical-align: middle;
    /* 垂直居中对齐 */
    background-repeat: no-repeat;
    background-size: contain;
}

.el-icon-setting::before {
    background-image: url('../images/setting.png');
}

.el-icon-exit::before {
    background-image: url('../images/exit.png');
}

.el-icon-password::before {
    background-image: url('../images/upwd.png');
}

.el-popover {
    --el-popover-bg-color: var(--el-bg-color-overlay);
    --el-popover-font-size: var(--el-font-size-base);
    --el-popover-border-color: var(--el-border-color-lighter);
    // --el-popover-padding: 12px;
    --el-popover-padding-large: 18px 20px;
    --el-popover-title-font-size: 16px;
    --el-popover-title-text-color: var(--el-text-color-primary);
    --el-popover-border-radius: 4px;
}

.el-popover div {
    cursor: pointer;
    padding: 10px 10px 10px 10px;
}

.el-popover div:hover {
    background-color: #c1e1ff;
}

.el-popover.el-popper {
    border: 1px solid var(--el-popover-border-color);
    border-radius: var(--el-popover-border-radius);
    box-shadow: 0px 0px 12px #2e61d7; //var(--el-box-shadow-light);
    box-sizing: border-box;
    color: var(--el-text-color-regular);
    font-size: var(--el-popover-font-size);
    line-height: 1.4;
    min-width: 150px;
    overflow-wrap: break-word;
    padding: 10px 2px 10px 2px;
    z-index: var(--el-index-popper);
}

.el-popper.is-light .el-popper__arrow:before {
    border: 1px solid var(--el-border-color-light);
    right: 0;
}

.el-popper__arrow:before {
    //background: linear-gradient(to bottom right, #c1e1ff, #9aceff);
    box-sizing: border-box;
    content: " ";
    height: 10px;
    position: absolute;
    transform: rotate(45deg);
    width: 10px;
    z-index: -1;
}